<template>
    <div id="flat">
        <canvas :width="canvas.width" :height="canvas.height"></canvas>
    </div>
</template>

<script type="text/babel">
var drawPoint = (x,y,size,color)=>{
    canvas.fillStyle = color;
    canvas.beginPath();
    canvas.arc(w/2 + x, h/2 + y, size, 0, Math.PI * 2);
    canvas.closePath();
    canvas.fill();
}
,drawLine = (p1,p2,color)=>{
    canvas.strokeStyle = color;
    canvas.beginPath();
    canvas.moveTo(w/2 + p1.x, h/2 + p1.y);
    canvas.lineTo(w/2 + p2.x, h/2 + p2.y);
    canvas.closePath();
    canvas.stroke()
};

var canvas = null;
var vm = null;

const w = 800;
const h = 800;
const starsMax = 50;
const acc = 0.005;
const rMax = 150;

function Point(x,y){
    this.x = x;
    this.y = y;
    this.vx = 0;
    this.vy = 0;
    this.light = 0.5;
    this.reverse = ()=>{
        this.vx *= -1;
        this.vy *= -1;
    }
}

function P(x,y){
    return new Point(x,y)
}

//创造星云
var StarsCloud = [];
for (let i = 0; i < starsMax; i++) {
    StarsCloud.push(P(
            Math.floor(Math.random() * rMax - rMax / 2),
            Math.floor(Math.random() * rMax - rMax / 2),
    ))
}

function random(max,min=0){
    max = + max;
    min = + min;
    return min + Math.random()*(max-min);
}
window.random = random;

StarsCloud.forEach((p,i)=>{
    p.vx = random(100*acc,-100*acc);
    p.vy = random(100*acc,-100*acc);
})

const BeginAnimation = ()=>{
    setInterval(()=>{
        var {abs} = Math;
        var isOut = function(p){
            var m = rMax;
            return abs(p.x)>m||abs(p.y)>m;
        }

        StarsCloud.forEach((p,i)=>{
            p.x += p.vx;
            p.y += p.vy;

            p.light = random(1,0);

            if(isOut(p)){
                if(p.indicate==false){
                    p.reverse()
                };
                p.indicate = true;
            }else{
                p.indicate = false;
            }
        });
        vm.isChange = true;
    },30);
}

export default {
    data: ()=> ({
        isDrag: false,
        x: 0, y: 0,
        xa: 0, ya: 0,
        isChange: false,
        isPrevent: false,
        percent: 0,
        canvas: {
            width: `${w}px`,
            height: `${h}px`
        }
    }),
    methods: {
        draw: function () {
            canvas.clearRect(0, 0, w, h);
            canvas.fillStyle = "rgb(13,13,13)";
            canvas.fillRect(0, 0, 400, 400);

            StarsCloud.forEach((p, i)=> {
                drawPoint(p.x,p.y,2,`rgba(120,255,170,${p.light})`);
            });

            drawLine(P(-rMax,rMax),P(rMax,rMax),'#202020');
            drawLine(P(-rMax,rMax),P(-rMax,-rMax),'#202020');
            drawLine(P(rMax,rMax),P(rMax,-rMax),'#202020');
            drawLine(P(rMax,-rMax),P(-rMax,-rMax),'#202020');
        }
    },
    ready: function () {
        canvas = [...this.$el.children].filter((n)=> {
            return n.localName == 'canvas'
        })[0].getContext('2d');
        window.canvas = canvas;
        this.isChange = true;

        vm = this;
        BeginAnimation();

        let Render = ()=> {
            if (!vm.isChange) {
                return window.AnimeRender(Render);
            } else {
                vm.draw();
                vm.isChange = false;
                window.AnimeRender(Render);
            }
        };
        window.AnimeRender(Render);
    },
}
</script>
